<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>印章申请</title>
    <link rel="stylesheet" href="/asset/layui/css/layui.css">
    <link rel="stylesheet" href="/asset/css/index.css">
    <link rel="Shortcut Icon" href="cachet.ico">
    <script type="text/javascript" src="/asset/js/jquery-3.3.1.min.js"></script>
	<script src="/asset/layui/layui.js"></script>
    <script src="/asset/js/common.js"></script>
</head>
<body class="layui-layout-body">
 <div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="body_right">
		<h4 class="nav_title">申请印章</h4>
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
	        <ul class="layui-tab-title">
	            <li class="layui-this" lay-id="APPLY_USED">申请使用</li>
	            <li lay-id="APPLY_TAKE">申请外带</li>
	        </ul>
	        <div class="layui-tab-content"> 
	        
	            <div class="layui-tab-item layui-show">
	             <form class="layui-form no_bordertop">
	             
	             <input type="hidden" id="sealId" name="sealId" value="${seal.sealId}">
	             <input type="hidden" id="applyType" name="applyType" value="USED_APPLY">
	             
		              <div class="layui-form-item">
			              <label for="model" class="layui-form-label">印章名称</label>
			              <div class="layui-input-inline layui-form-mid layui-word-aux">
			                 ${seal.sealName}
			              </div>
			          </div>
			          
			          <div class="layui-form-item" id="applyUsed">
			              <label for="model" class="layui-form-label">
			                  申请次数
			              </label>
			              <div class="layui-input-inline" style="width:100px">
			              	  <input type="text" id="applyTimes" name="applyTimes" value="<#if apply??>${apply.applyTimes}<#else>1</#if>" required="" lay-verify="alias" autocomplete="off" class="layui-input">
			              </div>
			              <div class="layui-form-mid layui-word-aux">
			                  <span class="x-red">每次最多可申请5次</span>
			              </div>
			          </div>
			          
			          
			          <div class="layui-form-item layui-hide" id="applyTake">
			              <label for="model" class="layui-form-label">
			                  外带时间
			              </label>
			              <div class="layui-input-inline" style="width:100px">
			              	   <input type="text" class="layui-input inputdate" value="<#if apply?? && apply.applyType=='TAKE_APPLY'>${apply.takeStartTime?string('yyyy-MM-dd')}</#if>" id="takeStartTime" name="takeStartTime">
			              </div>
			              <div class="layui-form-mid"> - </div>
			               <div class="layui-input-inline" style="width:100px">
			              	   <input type="text" class="layui-input inputdate" value="<#if apply?? && apply.applyType=='TAKE_APPLY'>${apply.takeEndTime?string('yyyy-MM-dd')}</#if>" id="takeEndTime" name="takeEndTime">
			              </div>
			          </div>
			          
			          
			          <div class="layui-form-item layui-hide" id="takeDestination">
			              <label for="model" class="layui-form-label">
			                  外带地
			              </label>
			              <div class="layui-input-inline" style="">
			              	   <input type="text" class="layui-input" value="<#if apply??>${apply.takeDestination}</#if>" id="takeDestination" name="takeDestination">
			              </div>
			          </div>
			          
			          
			          <div class="layui-form-item">
			              <label for="cause" class="layui-form-label">申请事由 </label>
			              <div class="layui-input-inline" >
			              	  <textarea placeholder="申请事由" class="layui-textarea" name="cause"><#if apply??>${apply.cause}</#if></textarea>
			              </div>
			          </div>
			          
			          <div class="layui-form-item">
			              <label for="model" class="layui-form-label">相关合同</label>
			              <div class="layui-input-inline" style="width:600px">
			              		<div class="layui-upload">
								  上传相关合同能增加审核效率
								  <div class="layui-upload-list">
								    <table class="layui-table">
								      <thead>
								          <tr>
									        <th>文件名</th>
									        <th>操作</th>
									      </tr>
								      </thead>
								      <tbody id="demoList"></tbody>
								    </table>
								  </div>
								  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="testList">选择文件</button> 
								</div> 
			              </div>
			           </div>
			           
			           <#if seal.useSpecial == "Y">
			           <div class="layui-form-item">
			              <label for="cause" class="layui-form-label">特批流程 </label>
			              <div class="layui-input-inline" >
			              	  <input type="checkbox" name="useSpecial" id="useSpecial" value="Y" lay-filter="switchTest" lay-skin="switch" lay-text="启用|禁用">
			              </div>
			          </div>
			           </#if>
			           <div class="layui-form-item">
			              <label for="cause" class="layui-form-label">审核人 </label>
			              <div class="layui-input-block">
			              	<div id="default">
				                <ul class="new_people">
				                	<#list settings as item>
					                <li>
					                    <div class="header_top">
					                        <img src="${item.person.portrait!"/asset/images/portrait.png"}" alt="" class="vatol_img">
					                    </div>
					                    <p class="only_title">${item.person.name}</p>
					                </li>
					                </#list>
					            </ul>
				            </div>
				            
				            <div id="special" class="layui-hide">
				                <ul class="new_people">
				                	<#if specials??>
					                <#list specials as item>
					                <li>
					                    <div class="header_top">
					                        <img src="${item.person.portrait!"/asset/images/portrait.png"}" alt="" class="vatol_img">
					                    </div>
					                    <p class="only_title">${item.person.name}</p>
					                </li>
					                </#list>
					                </#if>
					            </ul>
				            </div>
					      </div>
			           </div>
			           
		               <div class="layui-form-item">
			              <label for="L_repass" class="layui-form-label">
			              </label>
			              <button  class="layui-btn" lay-filter="add" lay-submit="">提交申请</button>
			          </div>
	               </form>
	               
	            </div>
	            
	        </div>
	    </div>
	</div>
</div>
    <script>
        layui.use(['form','layer','laydate','upload'], function(){
            $ = layui.jquery;
          var form = layui.form,layer = layui.layer,laydate = layui.laydate,upload = layui.upload,element = layui.element;
          
          
		   lay('.inputdate').each(function(){
			    laydate.render({
			      elem: this
			      ,trigger: 'click'
			    });
			});
		  
		  
		  element.on('tab(docDemoTabBrief)', function(elem){
		  		var id = $(this).attr('lay-id');
		  		if(id == 'APPLY_USED'){
		  		 	$("#applyUsed").removeClass("layui-hide");
		  		 	$("#applyTake").addClass("layui-hide");
		  		 	$("#takeDestination").addClass("layui-hide");
		  		 	$("#applyType").val("USED_APPLY");
		  		}
		  		
		  		if(id == 'APPLY_TAKE'){
		  			$("#applyTake").removeClass("layui-hide");
		  		 	$("#applyUsed").addClass("layui-hide");
		  		 	
		  		 	$("#takeDestination").removeClass("layui-hide");
		  		 	$("#applyType").val("TAKE_APPLY");
		  		}
		  });
		  
		  form.on('switch(switchTest)', function(data){
		  		if(this.checked){
		  			$("#special").removeClass("layui-hide");
		  			$("#default").addClass("layui-hide");
		  		}else{
		  			$("#default").removeClass("layui-hide");
		  			$("#special").addClass("layui-hide");
		  		}
		  });
		  
	  		  
		  		  		  		  
		var demoListView = $('#demoList')  
		
		upload.render({
		  elem: '#testList'
		  ,url: '/upload/fileupload.htm?module=file'
		  ,accept:'file'
		  ,multiple: true
		  ,allDone: function(obj){ //当文件全部被提交后，才触发
		    console.log(obj.total); //得到总文件数
		    console.log(obj.successful); //请求成功的文件数
		    console.log(obj.aborted); //请求失败的文件数
		  }
		  ,done: function(res, index, upload){ //每个文件提交一次触发一次。详见“请求成功的回调”
		  		console.log(res);
		  		if(res.code == 1){
		  			var data = res.data;
		  			
		  			
		  			var tr = $(['<tr id="upload-'+ index +'">'
			          ,'<td><input type="hidden" name="upfileIds" value="'+data.upfileId+'">'+ data.filename +'</td>'
			          ,'<td>'
			            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
			            ,'<a href="'+data.fileurl+'" target="_blank" class="layui-btn layui-btn-xs layui-btn-warm">查看</a>'
			          ,'</td>'
			        ,'</tr>'].join(''));
			        
			         tr.find('.demo-delete').on('click', function(){
			          
			          	tr.remove();
			          
			          	return false;
			         });
			        
			        
			        demoListView.append(tr);
		  		
		  		}else{
		  		
		  			console.log("---error--");
		  		}
		  
		  }
		});      
		  

          //监听提交
          form.on('submit(add)', function(data){
            
            var field = data.field;
            
            
            var $upfileIds = $("input[name='upfileIds']");
            
            if(field.applyType=='USE_APPLY'){
            	
            	if($upfileIds.length <=0){
	            	layer.msg('请上传相关合同凭证');
	            	return false;
	            }
            }else{
            	if($upfileIds.length >0){
	            	$upfileIds.each(function(i,item){
		            	field['upfileIds['+i+']'] = $(this).val();
		            })
            	}
            }
            
            
            
            
           
            
            $.ajax({
      			type:"POST", 
      			url:"/apply/submit.htm",
      			data:field,
      			success:function(result) {
		      
		      		if(result.code=='1'){
		      			layer.alert("申请成功，等待审核", {icon: 6},function () {
			                // 获得frame索引
			                 location.reload();
			                	 location.href="/apply/list.htm";
			                 
			            });
		      		}else{
		      		 	layer.msg(result.msg);
		      		}
		      
		    	 	} 
		    });
            
            return false;
          });
          
        });
    </script>

</body>
</html>